/**
 * Created by huotaol on 2017/5/23.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, View} from "react-native";
import CustomStyle from "../../../../common/style/CustomStyle";

export default class HelpList extends Component {
    static propTypes = {
        title: PropTypes.string,
        numberTextList: PropTypes.array,
    };

    render() {
        return (
            <View >
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                    alignSelf: 'center',
                    marginTop: CustomStyle.getActualSizeInVertical(40),
                    marginBottom: CustomStyle.getActualSizeInVertical(40),
                }}>
                    <Image source={require('../../../../img/soldCar/star.png')} style={{
                        width: CustomStyle.getActualSizeInHorizontal(18),
                        height: CustomStyle.getActualSizeInVertical(17),
                    }}/>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: '#4a3d18',
                        marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                        marginRight: CustomStyle.getActualSizeInHorizontal(20),
                    }]}>{this.props.title}</Text>
                    <Image source={require('../../../../img/soldCar/star.png')} style={{
                        width: CustomStyle.getActualSizeInHorizontal(18),
                        height: CustomStyle.getActualSizeInVertical(17),
                    }}/>
                </View>
                {
                    this.props.numberTextList.map(item => {
                        return <View >
                            <NumberText number={item.number} title={item.title}/>
                            <Text style={[CustomStyle.baseText, {
                                marginLeft: CustomStyle.getActualSizeInHorizontal(60),
                                marginRight: CustomStyle.getActualSizeInHorizontal(16),
                                fontSize: CustomStyle.getActualFontSize(24),
                                color: '#857e6e',
                                marginTop: CustomStyle.getActualSizeInVertical(8),
                                flex: 1,
                            }]}>{item.content}</Text>
                        </View>
                    })
                }
            </View>
        );
    }
}

class NumberText extends Component {
    static propTypes = {
        number: PropTypes.string,
        title: PropTypes.string,

    };

    render() {
        return (
            <View style={{flexDirection: 'row',}}>
                <View style={{
                    flexDirection: 'row',
                    height: CustomStyle.getActualSizeInVertical(70),
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    borderWidth: CustomStyle.getActualSizeInVertical(1),
                    borderBottomColor: '#ede9dd',
                    borderColor: 'transparent',
                }}>
                    <View style={{flexDirection: 'row',}}>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(28),
                            color: 'white',
                            width: CustomStyle.getActualSizeInHorizontal(40),
                            height: CustomStyle.getActualSizeInVertical(40),
                            backgroundColor: '#ff7200',
                            textAlign: 'center',
                        }]}>{this.props.number}</Text>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(28),
                            color: '#857e6e',
                            marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                            flex: 1,
                        }]}>{this.props.title}</Text>
                    </View>
                </View>
            </View>
        );
    }
}